// 请求下头部的二级菜单

function xtopHeader(){
    var headerNav = document.getElementsByClassName("header-nav")[0];
    var navA = headerNav.children;
    var flag = false;
    
    headerNav.onmouseover = function(eve){
        var e = eve || event;
        var target = e.target || e.srcElement;
        var xStr = "";
        
        if(target.nodeName.toLowerCase() == "a"){
            // console.log(target.getAttribute("data-id"));
            var tarVal = target.getAttribute("data-id");
            if(tarVal){
                var xDiv = document.createElement("div");
                xDiv.className = "header-nav-div";
                var xUl = document.createElement("ul");
                xUl.className = "header-nav-ul";
                xDiv.appendChild(xUl);
                flag = true;
            }
            _ajax.request({
                url:"./json/topHeader.json",
                data:"",
                success:function(_data){
                    var _data = JSON.parse(_data);
                    // console.log(_data.mains);
                    for (const key in _data.mains) {
                        if (_data.mains.hasOwnProperty(key) && key == tarVal) {
                            // console.log(key);
                            // console.log(_data.mains[key]);
                            for(let i=0; i<_data.mains[key].length;i++){
                                // console.log(_data.mains[key][4]);
                                xStr +=`
                                    <li><a href="#">
                                        <div class="figue">
                                            <img src="./images/2b0d7d2c85734b80a1b8d1a4100c9c1f.png" alt="">
                                        </div>
                                        <div class="title">${_data.mains[key][i].name}</div>
                                        <p class="price">${_data.mains[key][i].prse}${_data.mains[key][i].yuan}</p>
                                    </a></li>
                                `;
                                
                                // break;
                                // return xStr;
                                
                            }
                            xUl.innerHTML = xStr;
                            // console.log(xStr);
                            headerNav.appendChild(xDiv);
                            // console.log(xUl);
                        }
                    }
                }
            })
        }
            
        
        
    }

    for(let i=0; i<navA.length-2; i++){
        navA[i].onmouseout = function(){
            // console.log(navA);
            if(flag){
                navA[i].parentNode.removeChild(navA[i].parentNode.lastElementChild);
            }else{
                return
            }
            
        }
    }
    
}

xtopHeader();